<template>
  <div class="login">
    <div class="login-container">
      <div class="login-header">
        <img class="logo" width="50" src="../../assets/logo.png" alt="" />
        <span class="title">外卖商家后台系统</span>
      </div>

      <!-- 登录表单 -->
      <el-form :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" prefix-icon="iconfont icon-zhanghao" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input :type="passwordInputType" v-model="loginForm.password" prefix-icon="iconfont icon-mima" autocomplete="off">
            <i slot="suffix" @click="changeType" class="iconfont" :class="{ 'icon-eye-close': passwordInputType === 'password', 'icon-eye-open': passwordInputType === 'text' }"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkAccount, checkPassword } from '@/utils/tools'
import { checkLogin } from '@/api/user'
import { loacl } from '@/utils/local'
export default {
  data() {
    return {
      passwordInputType: 'password',
      // 登录验证
      loginForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          // 自定义验证表单
          { validator: checkAccount, trigger: 'blur' }
        ],
        password: [
          // 自定义验证表单
          { validator: checkPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 切换密码框类型
    changeType() {
      if (this.passwordInputType == 'password') {
        this.passwordInputType = 'text'
      } else {
        this.passwordInputType = 'password'
      }
    },
    submitForm() {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          let res = await checkLogin(this.loginForm)
          let { code, role, token } = res.data
          if (code === 0) {
            loacl.set('token_userlogin', token)
            loacl.set('role', role)
            // 成功登录跳转首页
            this.$router.push('/')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes mymove {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  .login-container {
    border-radius: 10px;
    width: 400px;
    height: 300px;

    .login-header {
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      margin-bottom: 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      .logo {
        margin-right: 30px;
        // position: relative;
        animation: mymove 5s linear infinite;
      }

      .title {
        font-size: 20px;
        font-weight: 500;
      }
    }
  }
  .el-input {
    /deep/ .el-input__inner {
      background-color: transparent;
      letter-spacing: 1px;
      color: #fff;
    }
  }
  .el-button {
    width: 100%;
  }
}
</style>
